import React from "react";
import logo from "../../asset/svg/logo.svg";
import styles from "./main.module.css";
import {Widget} from "rasa-webchat"

console.log("====================================");
console.log("Widget", Widget);
console.log("====================================");
export interface helloState {
  msg: string;
}

export interface helloProps {
  name?: string;
}

export default class Hello extends React.Component<helloProps, helloState> {
  state = { msg: "hello hello" };
  static defaultProps = {
    //设置props默认值方法
    name: "rdj",
  };
  // constructor(props: Readonly<helloProps>) {
  //   super(props);
  // }

  render() {
    // let match = useRouteMatch();
    // console.log(match);

    return (
      <div className={styles["App-header"]}>
        {/* <img src={logo} className={styles["App-logo"]} alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className={styles["App-link"]}
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {this.props.name} Learn React
        </a> */}
        <Widget
          interval={0}
          initPayload={"/get_started"}
          socketUrl={"localhost:8060"}
          // socketUrl={"192.168.11.119:5005"}
          socketPath={"/proxy_ws/socket.io"}
          customData={{ language: "zh" }} // arbitrary custom data. Stay minimal as this will be added to the socket
          title={"Title"}
          embedded={true}
          inputTextFieldHint="Try out your chatbot..."
          hideWhenNotConnected={false}
          params={{
            images: {
              dims: {
                width: 300,
                height: 200,
              },
            },
          }}
        />
      </div>
    );
  }
}
